<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>图书信息管理子系统</title>
    <link th:href="@{/js/layui/css/layui.css}" rel="stylesheet">
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/layui/layui.js}"></script>
    <style>
        .searchTable {
            margin-bottom: 10px;
        }
    </style>
</head>
<body class="layui-view-body">
<div class="layui-content">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="searchTable">
                    用户ID：
                    <div class="layui-inline mr5">
                        <input class="layui-input" name="id" autocomplete="off">
                    </div>
                    图书名称：
                    <div class="layui-inline mr10">
                        <input class="layui-input" name="bookName" autocomplete="off">
                    </div>
                    作者：
                    <div class="layui-inline mr10">
                        <input class="layui-input" name="author" autocomplete="off">
                    </div>
                    <button class="layui-btn" data-type="reload">查询</button>
                    <button class="layui-btn layui-btn-primary" data-type="reset">重置</button>
                    <button class="layui-btn" th:if="${session.loginUser.type == 0}" data-type="add" style="margin-left: 450px">新增</button>
                    <button class="layui-btn" data-type="logout">退出</button>
                </div>
                <table class="layui-hide" id="bookTable" lay-filter="config"></table>
                <script type="text/html" id="operation">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
                    <a class="layui-btn layui-btn-danger  layui-btn-xs" lay-event="del">删除</a>
                </script>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var table = layui.table;
    var layer = layui.layer;
    table.render({
        id: 'bookTable'
        ,elem: '#bookTable'
        ,method: 'post'
        ,url: '[[@{/book/page}]]'
        ,page: {
            layout: ['prev', 'page', 'next', 'count', 'skip', 'limit']
            ,groups: 5
            ,first: false
            ,last: false
        }
        ,cols: [
            [
                {field:'id', width: 50, title: 'ID'}
                ,{field:'bookName', title: '图书名称', align: 'center'}
                ,{field:'author', title: '作者', align: 'center'}
                ,{field:'price', title: '价格', align: 'center'}
                ,{field:'number', title: '数量', align: 'center'}
                ,{field:'img', title: '图片', align: 'center'}
                ,{field:'remark', title: '备注', align: 'center'}
                ,{title:'操作', align: 'center', toolbar: '#operation', width:150,hide: [[${session.loginUser.type == 1}]]}
            ]
        ]
        ,response: {
            statusCode: 200
        }
        ,parseData: function(res){
            return {
                "code": res.code
                ,"msg": res.msg
                ,"count": res.data.total
                ,"data": res.data.list
            };
        }
    });

    active = {
        add: function() {
            layer.open({
                type: 2,
                area: ['600px', '600px'],
                title: '新增',
                content: '[[@{/}]]book/add'
            });
        },
        reload: function() {
            table.reload('bookTable', {
                page: {
                    curr: 1
                }
                ,where: {
                    id : $("input[name='id']").val()
                    ,bookName : $("input[name='bookName']").val()
                    ,author : $("input[name='author']").val()
                }
            }, 'data');
        },
        reset: function() {
            $(".layui-input").val("");
        },
        logout: function() {
            location.href = "[[@{/}]]user/logout";
        }
    };

    // 按钮事件
    $('.layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

    //监听行工具事件
    table.on('tool(config)', function(obj){
        var row = obj.data;
        if(obj.event === 'del') {
            layer.confirm("确认删除吗？", {icon: 3, title:'提示'}, function(index) {
                layer.close(index);
                $.ajax({
                    url : "[[@{/}]]book/delete",
                    data : {'id': row.id},
                    type : "post",
                    dataType : "json",
                    error : function(data) {
                        errorHandle(data);
                    },
                    success : function(data) {
                        $(".searchTable .layui-btn").eq(0).click();
                    }
                });
            });
        } else if (obj.event === 'edit') {
            layer.open({
                type: 2,
                area: ['600px', '600px'],
                title: '修改',
                content: '[[@{/}]]book/edit?id=' + row.id
            });
        }
    });

    //错误处理
    function errorHandle(data) {
        if (data.status == 404) {
            layer.msg("请求资源不存在", {icon: 2});
        } else {
            layer.msg("服务端异常", {icon: 2});
        }
        return;
    }
</script>
</html>